<template>
  <div class="user">
    <!-- 顶部导航 -->
    <mt-header class="mytitle" title="个人中心">
      <div slot="left">
        <mt-button icon="back" @click="$router.go(-1)"></mt-button>
      </div>
    </mt-header>
    <div class="body">
      <div class="table">
        <!-- 用户昵称 -->
        <div class="user_name">
          <i class="iconfont icon-mine_fill user_attr"></i>
          <div class="middle_name">
            <p>123123123</p>
            <span>绑定手机:123123123</span>
          </div>
          <i class="iconfont icon-more name_more"></i>
        </div>
        <!-- 账号与安全 -->
        <div class="user_info">
          <span>账号与安全</span>
          <i class="iconfont icon-more name_more"></i>
        </div>
        <!-- 我的购物车 -->
        <div class="user_info">
          <span>我的购物车</span>
          <i class="iconfont icon-more name_more"></i>
        </div>
        <!-- 收货地址管理 -->
        <div class="user_info address">
          <span>收货地址管理</span>
          <i class="iconfont icon-more name_more"></i>
        </div>
      </div>
      <!-- 退出登录按钮 -->
      <mt-button class="logout_btn" type="danger">退出登录</mt-button>
    </div>
    <tab-bar></tab-bar>
  </div>
</template>
<script>
import TabBar from '@/components/tab-bar'
export default {
  components: {
    TabBar
  }
}
</script>
<style lang="scss" scoped>
  .user{
    height: 100%;
    background-color:#efeff4;
    .mytitle{
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 45px;
      background-color: #006699;
      color: #fff;
      font-size: 16px;
      ::before{
        font-weight: 600;
        font-size: 20px
      }
    }
    .body{
      height: 100%;
      padding: 45px 0 50px 0;
      .table{
        padding: 0 10px;
        background-color: #fff;
        .user_name{
          padding: 10px;
          display: flex;
          border-bottom: 1px solid #ccc;
          .user_attr{
            width: 20%;
            display: block;
            font-size: 50px;
          }
          .middle_name{
            width: 70%;
            line-height: 25px;
            p{
              margin: 0;
              padding: 0;
              font-weight: 600
            }
            span{
              font-size: 14px;
              color: #aaa;
            }
          }
          .name_more{
            padding-top: 10px;
            width: 10%;
            font-size: 30px;
          }
        }
        :active{
            background: #efeff4;
          }
        .user_info{
          border-bottom: 1px solid #ccc;
          padding:10px;
          display: flex;
          justify-content: space-between;
          span{
            padding: 10px 0;
          }
          .name_more{
            width: 10%;
            font-size: 30px;
            padding-top: 3px;
          }
        }
        .address{
          border: none;
        }
      }
      .logout_btn{
        margin: 10px;
        width: 95%;
        padding: 5px 0;
      }
    }
  }
</style>
